<template>
    <div>
      <!-- 顶部菜单栏 -->
      <nav class="header">
      <div class="left-menu">
        <a  class="menu-item"  @click="goTo('salesCloudProductIndex')">首页</a>
        <a  class="menu-item"  @click="goTo('salesCloudProducts')">产品</a>
      </div>
      <div class="right-menu">
        <a  class="menu-item" v-if="!token"  @click="goTo('salesCloudProductLogin')">登录</a>
        <a   v-else >
          <el-dropdown >
            <span class="menu-item" >
              {{user}}
            </span>
            <el-dropdown-menu slot="dropdown" style="font-size: 16px !important;">
              <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
              <el-dropdown-item @click.native="goTo('wel/index')">后台管理</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </a>
      </div>
    </nav>
      <!-- 滚动 -->
      <div class="scrollable-content">
        <!-- 详情 -->
        <div>
           <!-- 演示 -->
        <el-link :underline="false" style="display: block;"  target="_blank" @click="Message(products.productDemo)">
          <img src="http://113.125.185.48:9000/bladex/upload/20240621/0a6093f33a85b5711685f3925b757fe7.png" alt=""  style="position: fixed !important;cursor: pointer;top: 50%;width: 26px;height: 84px;margin-left: 95%;z-index: 999;" >
        </el-link>
        <div style="height: 300px;width: 100%;background-color: #151e26">
          <!-- 产品介绍 -->
          <div style="color: #fff;width: 36%;margin-left: 10%;padding-top: 4%;display: inline-block;">
            <!-- 产品名称 -->
            <div style="font-size: 32px;margin-bottom: 4%;">{{products.productName}}</div>
            <!-- 产品详细介绍 -->
            <el-tooltip placement="bottom" effect="light">
              <div slot="content" style="width: 300px;font-size:16px" v-html="products.productIntroduction"></div>
              <div style="font-size: 18px;text-indent: 2em;  display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden; /* 隐藏超出的部分 */text-overflow: ellipsis; /* 使用省略号来表示被截断的文本 */" v-html="products.productIntroduction"></div>
            </el-tooltip>
            </div>
          <video :src="products.productVideo" style="height: 300px;width: 30%;float: right;margin-right: 10%;text-align: center;" controls></video>
        </div>
        <h3 style="text-align: center;font-size: 36px;margin: 3%;">
          <!-- 锚点 -->
          <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#1890ff" style="width: 100%;position: sticky;top: 10px;height: 60px;z-index: 888;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);background-color: #fff !important;">
            <el-menu-item  v-for="mainItem in  mainItem" :key="mainItem" :index="mainItem.index" style="width: 16%;" ><a :href="mainItem.href" style="text-decoration: none;height: 100%;width: 100%;display: block;">{{mainItem.label}}</a></el-menu-item>
          </el-menu>
          
          <div>
            <div id="hexin">
            <div style="margin: 2%;">
              <img src="http://113.125.185.48:9000/bladex/upload/20240621/da1ee4bd56c7043250c9729cd540b894.png" alt="">  
              核心功能
              <img src="http://113.125.185.48:9000/bladex/upload/20240621/c3f14b2aeea7add517bc94e60e9d95da.png" alt="">
            </div>
            <div v-if="products.coreFunctions != ''" style="font-size: large;" v-html="products.coreFunctions"></div>  
            <el-empty style="height: 300px;margin-bottom: 100px;display: block;text-align: center;" v-else>
              <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" alt="">
              <div style="font-size: 18px;color: #909399;">
                暂无商品数据
              </div>
            </el-empty> 
            </div>
          </div>

          <!-- 应用场景 -->
          <div>
            <div id="yingyong">
            <div style="margin: 2%;">
              <img src="http://113.125.185.48:9000/bladex/upload/20240621/da1ee4bd56c7043250c9729cd540b894.png" alt="">  
              应用场景
              <img src="http://113.125.185.48:9000/bladex/upload/20240621/c3f14b2aeea7add517bc94e60e9d95da.png" alt="">
            </div>
            <div v-if="products.productScene != ''" style="font-size: large;" v-html="products.productScene"></div>   
            <el-empty style="height: 300px;margin-bottom: 100px;display: block;text-align: center;" v-else>
              <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" alt="">
              <div style="font-size: 18px;color: #909399;">
                暂无商品数据
              </div>
            </el-empty> 
            </div>
          </div>

          <!-- 产品优势 -->
            <div>
              <div id="youshi">
                <div style="margin: 2%;">
                  <img src="http://113.125.185.48:9000/bladex/upload/20240621/da1ee4bd56c7043250c9729cd540b894.png" alt="">  
                  产品优势
                  <img src="http://113.125.185.48:9000/bladex/upload/20240621/c3f14b2aeea7add517bc94e60e9d95da.png" alt="">
                </div>
                <div v-if="products.productAdvantages != ''" style="font-size: large;" v-html="products.productAdvantages"></div>   
                <el-empty style="height: 300px;margin-bottom: 100px;display: block;text-align: center;" v-else>
                  <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" alt="">
                  <div style="font-size: 18px;color: #909399;">
                    暂无商品数据
                  </div>
                </el-empty> 
              </div>
            </div>

        <!-- 成功案例 -->
            <div>
              <div id="anli">
                <div style="margin: 2%;">
                  <img src="http://113.125.185.48:9000/bladex/upload/20240621/da1ee4bd56c7043250c9729cd540b894.png" alt="">  
                  成功案例
                  <img src="http://113.125.185.48:9000/bladex/upload/20240621/c3f14b2aeea7add517bc94e60e9d95da.png" alt="">
                </div>
                <div v-if="products.productSuccessCases !=''" style="font-size: large;" v-html="products.productSuccessCases"></div>       
                <el-empty style="height: 300px;margin-bottom: 100px;display: block;text-align: center;" v-else>
                  <img src="http://113.125.185.48:9000/bladex/upload/20240624/53a2717bab52e273e639009b0779cf9c.png" alt="">
                  <div style="font-size: 18px;color: #909399;">
                    暂无商品数据
                  </div>
                </el-empty> 
              </div>
            </div>

          
        </h3>
        <div style="background-color: #fff;height: 200px;">
          <div style="font-size: 20px;margin: 8%;padding-top: 3%;margin-bottom: 0;" id="fujian">附件下载</div>  
          <div style="margin-left: 8%;margin-top: 2%;">
            <el-link style="margin-left: 2%;font-size: 20px;" :underline="false" v-if="products.productFiles != ''"  @click="downLoad(products.productFiles)">附件<i  class="el-icon-view el-icon-download"></i></el-link>
          </div>        
        </div>

        <div style="height: 200px;width: 100%;background-color:#252f35;font-size: 18px;color: #fff;padding-top: 2%;padding-left: 10%;" id="lianxi">
          <div style="font-size: 30px;margin-bottom: 2%;text-decoration: underline;text-underline-offset: 10px;">联系我们</div>
          
          <div style="color: rgba(255, 255, 255, .5);margin-bottom: 2%;">Contact us</div>
          <el-row style="padding-bottom: 4%;" align="center">
            <el-col :span="8"><div >联系人：{{ products.contactsName }}</div></el-col>
            <el-col :span="8"><div >联系电话：{{ products.contactsPhone }}</div></el-col>
            <el-col :span="8"><div ></div></el-col>

          </el-row>
          
        </div>
      </div>
        <div style="height: 80px;width: 100%;background-color: #000;text-align: center;font-size: 16px;color: #fff;">
          <div style="padding-top: 30px;">版权所有：创新工作室©2024年</div>
        </div>
      </div>
      
    </div>
    
  </template>
  
  <script>
import { getToken } from '@/utils/auth';
  export default {
    name: 'App',
    data() {
      return {
        activeIndex: '1',
        mainItem: [
          {
            index:1,
            label:'核心功能',
            href:'#hexin',
          },
          {
            index:2,
            label:'应用场景',
            href:'#yingyong'
          },
          {
            index:3,
            label:'产品优势',
            href:'#youshi'
          },
          {
            index:4,
            label:'成功案例',
            href:'#anli'
          },
          {
            index:5,
            label:'附件下载',
            href:'#fujian'
          },
          {
            index:6,
            label:'联系我们',
            href:'#lianxi'
          },
        ],
        products:{},
        user:'',
        token:'',
        page:{
          current:1,
          size:1,
        },
        params: {
        id: '',
        },
      }
    },
    created(){
      this.params.id = this.$route.query.id;
      this.onLoad(this.page,this.params)
      this.getUser();
    },
    methods:{
      goTo(item) {
        this.$router.push('/'+item);
      },
      // 用户信息
      getUser(){
        this.user = this.$store.state.user.userInfo.account;
        this.token = getToken() === undefined ? '' : getToken();
        // console.log(this.$store.state.user.userInfo)
      },
      // 退出登录
      handleLogout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        localStorage.clear();
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/salesCloudProductIndex" });
          location.reload();
          });
        });
      },
      //产品信息
      onLoad(page, params = {}) {
        // getList(page.current, page.size,params).then(res => {
        //   const data = res.data.data;
        //   this.products = data.records;
        //   // console.log(this.products)
        // });
        getDetail(this.params.id).then(res => {
          this.products = res.data.data;
        })
        updateAccessCount(this.params.id);
      },
      //文件下载
      downLoad(url){
        window.location.href = url;
      },
       //弹窗信息
      Message(productDemo) {
        if(productDemo == ''){
          this.$message({
          message: '暂无演示地址，请联系相关项目人员',
          center: true,
          type: 'warning'
          });
        }else{
          this.$message({
          message: '正在前往演示地址,请稍等',
          type: 'success',
          center: true
        });
        setTimeout(() => {
          window.open(productDemo+"?token="+getToken(),'_blank');
        }, 1000);
        }
      }
    }
  }
  </script>
  
  <style scoped>
/* 菜单 */
.header {
  background-color: white;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  height: 64px;
  z-index: 1000;
  font-size: 18px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
/* 移除所有虚线边框 */
*:focus {
  outline: none;
}
.menu-item {
  color: #1890ff;
  text-decoration: none;
  padding: 20px;
  transition: color 0.3s, background-color 0.3s;
  height: 100%;
  border: none;
}

.menu-item:hover{
  color: white;
  background-color: #1890ff;
}

.left-menu,
.right-menu {
  display: flex;
}

  /* 滚动条 */
  .scrollable-content {
  height: calc(100vh - 64px);
  overflow-y: auto;
  background-color: #f5f7fa;
  }
  
  .el-carousel h3 {
    color: #475669;
    font-size: 18px;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
 .el-menu-item:hover {
  color: #007bff !important;
  }
  .image-container {
  position: relative;
  width: 100%;
  height: 200px;
  }
  
  
  .image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  }
  
  .image-container:hover .overlay {
  opacity: 1;
  }
  </style>
  